import React, { useRef, useEffect, useState } from "react";
import { useDispatch, useSelector } from 'umi'
import styles from "./addQuestions.less"
import { Select, Form, Input, Button, message } from 'antd';
import { IQuestionType, IExamType, ISubject } from '@/utils/interface'
import Editor from 'for-editor'
import { IQuestionForm } from "@/utils/interface";

const addQuestions: React.FC = () => {
    const { Option } = Select
    const [form] = Form.useForm();
    const inputLayout = {
        wrapperCol: {span: 12 }
    };
    const editorLayout = {
        wrapperCol: {span: 6 }
    }
    function setValues(){
        const values:{[key:string]:string} = {};
        if (questionTypes.length){
          values.questions_type_id = questionTypes[0].questions_type_id;
        }
        if (subjects.length){
          values.subject_id = subjects[0].subject_id;
        }
        if (examTypes.length){
          values.exam_id = examTypes[0].exam_id;
        }
        form.setFieldsValue(values)
    }
    const dispatch = useDispatch()
    useEffect(() => {
        dispatch({
            type: 'question/getQuestionType'
        })
        dispatch({
            type: 'question/getExamSubject'
        })
        dispatch({
            type: 'question/getExamType'
        })
    }, [])
    const { questionTypes } = useSelector(module => (module as { question: { questionTypes: IQuestionType[] } }).question)
    const { subjects } = useSelector(module => (module as { question: { subjects: ISubject[] } }).question)
    const { examTypes } = useSelector(module => (module as { question: { examTypes: IExamType[] } }).question)
    const { user_id } = useSelector(module=>(module as {user:{userInfo:{user_id:string}}}).user.userInfo)
    useEffect(()=>{
        setValues()
      }, [questionTypes, subjects, examTypes]);
    function onFinish(values: IQuestionForm) {
        let result = dispatch({
            type: 'question/submitQuestion',
            payload: {...values, user_id}
          });
          (result as unknown as Promise<{code: number, msg: string}>).then(res=>{
            if (res.code === 1){
              message.success(res.msg);
            }else{
              message.error(res.msg);
            }
            form.resetFields();
            setValues()
        })
    }
    return <Form className={styles.wrap} onFinish={onFinish} form={form} initialValues={{
        title: '',
        questions_stem: '',
        questions_answer: '',
      }}>
        <h1>添加试题</h1>
        <div className={styles.cotent}>
        <p>题目信息</p>
        <label htmlFor="">题干</label>
        <Form.Item
          {...inputLayout}
          name="title"
          rules={[{ required: true, message: '请输入试题题干!' }]}
        >
          <Input />
        </Form.Item>
        <label htmlFor="">题目主题</label>
        <Form.Item
          name="questions_stem"
          rules={[{ required: true, message: '请输入试题主题!' }]}
        >
          <Editor/>
        </Form.Item>
        <label htmlFor="">请选择考试类型：</label>
        <Form.Item
          name="exam_id"
          {...editorLayout}
        >
          <Select>{
              (examTypes as IExamType[]).map(item=>{
                return <Option key={item.exam_id} value={item.exam_id}>{item.exam_name}</Option>
              })
          }</Select>
        </Form.Item>

        <label htmlFor="">请选择课程类型：</label>
        <Form.Item
          name="subject_id"
          {...editorLayout}
        >
          <Select>{
              (subjects as ISubject[]).map(item=>{
                return <Option key={item.subject_id} value={item.subject_id}>{item.subject_text}</Option>
              })
          }</Select>
        </Form.Item>

        <label htmlFor="">请选择题目类型：</label>
        <Form.Item
          name="questions_type_id"
          {...editorLayout}
        >
          <Select>{
              (questionTypes as IQuestionType[]).map(item=>{
                return <Option key={item.questions_type_id} value={item.questions_type_id}>{item.questions_type_text}</Option>
              })
          }</Select>
        </Form.Item>

        <label htmlFor="">答案信息</label>
        <Form.Item
          name="questions_answer"
          rules={[{ required: true, message: '请输入试题答案!' }]}
        >
          <Editor/>
        </Form.Item>

        <Button type="primary" htmlType="submit" className={styles.btn}>
          提交
        </Button>
        </div>
      </Form>
      
}

export default addQuestions